<template>
  <dv-border-box-1 style="width: 800px">
    <ve-line :data="chartData" :extend="A2Settings" width="780px"></ve-line>
  </dv-border-box-1>

</template>
<script>
export default {
  name: "DataViewA2",
  data(){
    return{
      A2Settings :{
        title: {
          text: "24小时水位数据总览",
          x:'center',
          top: 10,
          textStyle:{
            color:'#e1ece1',
            fontFamily:'PingFang-RE',
            fontSize:24
          }
        },
        xAxis:{
          type:'category',
          name:'天数',
          nameTextStyle:{
            color:'#FFF',
            fontFamily:'PingFang-RE',
            fontSize:18,

          },
          nameLocation:'middle',
          axisLine:{
            lineStyle:{
              color:'#01ffd9'
            }
          },
          boundaryGap: false,
        },
        yAxis:{
          name:'水位高度',
          nameTextStyle:{
            color:'#FFF',
            fontFamily:'PingFang-RE',
            fontSize:18,
          },
          position:'left',
          boundaryGap: ['40%', '20%'],
          axisLine:{
            lineStyle:{
              color:'#01ffd9',
              center:['50%','50%']
            }
          },
        },

        series: [{

          }],

        legend:{
          top:'15%',
          textStyle:{
            color:'#ffffff',
            fontFamily:'PingFang-RE',
            fontSize:12
          }
        }
      },
      chartData: {
        columns: ['dateH', 'depth'],
        rows: [
          { dateH: '0', depth: 1393 },
          { dateH: '1', depth: 3530 },
          { dateH: '2', depth: 2923 },
          { dateH: '3', depth: 1723 },
          { dateH: '4', depth: 3792 },
          { dateH: '5', depth: 4593 },
          { dateH: '6', depth: 1393 },
          { dateH: '7', depth: 3530 },
          { dateH: '8', depth: 2923 },
          { dateH: '9', depth: 1723 },
          { dateH: '10', depth: 3792 },
          { dateH: '12', depth: 4593 },
          { dateH: '13', depth: 1393 },
          { dateH: '14', depth: 3530 },
          { dateH: '15', depth: 2923 },
          { dateH: '16', depth: 1723 },
          { dateH: '17', depth: 3792 },
          { dateH: '18', depth: 4593 },
          { dateH: '19', depth: 1393 },
          { dateH: '20', depth: 3530 },
          { dateH: '21', depth: 2923 },
          { dateH: '22', depth: 1723 },
          { dateH: '23', depth: 3792 },
        ]
      }
    }
  }
}
</script>

<style scoped>

</style>
